<template>
  <div>

    <h1 style="text-align: left">
      <img src="../../assets/img/home.png" style="width: 30px;height: 30px" flex>
      主页
    </h1>
    <hr style="margin-top: 5px">
    <div class="content-div">
      <div style="height: 50px"></div>
      <!--用户统计-->
      <div class="flex" style="text-align: left;justify-content: space-around">
        <div class="col-md-2">
          <div class="col-md-3 balance">
            <img src="../../assets/img/money.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{balance}}</h5>
            <h5 style="font-size: 19px;">账户余额</h5>
          </div>
        </div>

        <div class="col-md-2">
          <div class="col-md-3 dongjie">
            <img src="../../assets/img/dongjie.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{dongjie}}</h5>
            <h5 style="font-size: 19px;">冻结金额</h5>
          </div>
        </div>

        <div class="col-md-2">
          <div class="col-md-3 success-money">
            <img src="../../assets/img/success.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{successMoney}}</h5>
            <h5 style="font-size: 19px;">成功金额</h5>
          </div>
        </div>
      </div>
      <div style="height: 10px"></div>

      <div class="flex" style="text-align: left;justify-content: space-around">
        <div class="col-md-2">
          <div class="col-md-3 success-pay">
            <img src="../../assets/img/success2.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{successPay}}</h5>
            <h5 style="font-size: 19px;">成功笔数</h5>
          </div>
        </div>

        <div class="col-md-2">
          <div class="col-md-3 pending">
            <img src="../../assets/img/pending.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{pending}}</h5>
            <h5 style="font-size: 19px;">处理中笔数</h5>
          </div>
        </div>

        <div class="col-md-2">
          <div class="col-md-3 failed">
            <img src="../../assets/img/fail.png" alt="" style="width: 50px;height: 50px;margin-top: 25px">
          </div>
          <div class="col-md-4">
            <h5 style="font-size: 25px">{{fail}}</h5>
            <h5 style="font-size: 19px;">失败金额</h5>
          </div>
        </div>
      </div>
      <div style="height: 10px"></div>
      <hr>
      <!--个人信息-->
      <div style="display: flex;margin-left: 4.16%">
        <div style="width: 35%">
          <div style="height: 15px"></div>
          <div style="height: 50px;background-color: #009987;display: flex">
            <div style="margin-left: 10px;background-color: #F2F2F2;width: 99%">
              <h5 style="font-size: 20px;text-align: left;line-height: 50px;margin-left: 5px">商 户 信 息</h5>
            </div>
          </div>
          <br>
          <div style="">
            <el-input readonly class="info-class" placeholder="暂无" v-model="userInfo.userId">
              <template slot="prepend">商 户 号</template>
            </el-input>
            <el-input readonly class="info-class" placeholder="暂无" v-model="userInfo.privateKey">
              <template slot="prepend">私 钥</template>
            </el-input>
            <el-input readonly class="info-class" placeholder="暂无" v-model="userInfo.publicKey">
              <template slot="prepend">公 钥</template>
            </el-input>
            <el-input readonly class="info-class" placeholder="暂无" v-model="userInfo.ptPublicKey">
              <template slot="prepend">平 台 公 钥</template>
            </el-input>
          </div>
        </div>
        <!--平台公告-->
        <div class="gonggao-div">
          <div style="height: 15px"></div>
          <div style="height: 50px;background-color: #009987;margin-left: 4.16%;display: flex">
            <div style="margin-left: 10px;background-color: #F2F2F2;width: 99%">
              <h5 style="font-size: 20px;text-align: left;line-height: 50px;margin-left: 5px">平 台 公 告</h5>
            </div>
          </div>
          <!--公告表格-->
          <el-table
            :data="tableData"
            style="width: 97%;margin-left: auto">
            <el-table-column
              label="日期"
              width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ dataFormat(scope.row.date) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="标题"
              width="180">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  plain
                  @click="handleEdit(scope.$index, scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background="#f0cba4"
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>{{content}}</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import dateFormat from '../../assets/js/dateformat'
  import $ from 'jquery'
  export default {
    data() {
      return {
        userInfo:{

        },
        tableData: [],
        dataFormat: dateFormat,
        gonggaodialog:'',
        dialogVisible:false,
        content:'',
        title:'',
        balance:'',
        dongjie:'',
        successMoney:'',
        successPay:'',
        pending:'',
        fail:'',
        pageSize:4,
        pageNumber:1,
        total:1
      }
    },
    methods: {

      getFeilv(){
        this.$api.getchannels().then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            this.tableInfo = res.data;
            console.log(this.tableInfo)
            this.tableInfo.forEach(item =>{
              switch (item.settlementType){
                case 3:item.settlementType = 'D0';break;
                case 4:item.settlementType = 'T0';break;
                case 5:item.settlementType = 'D1';break;
                case 6:item.settlementType = 'T1';break;
                default:break;
              }

            })

          }
        })

      },

      handleCurrentChange(val){
        this.pageNumber = val
        this.getTableData()
      },
      getTableData() {
        this.$api.getAllMes({pageSize:this.pageSize,pageNumber:this.pageNumber}).then(res => {
          if (res.code === '000000') {
            this.tableData = res.data.list
            this.total = res.data.totalRow
            this.$message.success("获取公告列表成功！")
          }
        })
      },
      handleEdit(index, row) {
        this.dialogVisible = true
        this.content = row.content
        this.title = row.title
      },
      getIndexInfo(){
        this.$api.getIndexInfo().then(res => {
          if (res.code==='000000'){
            this.balance = res.data.balance
            this.dongjie=res.data.lockMoney
            this.successMoney = res.data.successMoney
            this.successPay = res.data.successNumber
            this.pending = res.data.dealMoney
            this.fail = res.data.failMoney
          }
        })
      },
      getUserInfo(){
        this.$api.getUserInfo2().then(res => {
          if (res.code === '000000') {
            console.log(res)
            this.userInfo = res.data

          }
        })
      }
    },
    openWindow(){

    },
    created() {
      this.getUserInfo();
      this.getIndexInfo();
      this.getTableData();
      this.getFeilv();
      window.onscroll = function () {
        document.getElementByid('feilv').style.top = window.scrollY + (window.innerHeight / 2 - 150) + 'px';
      }
    }
  }
</script>
<style lang="less">
  .col-md-2 {
    margin-top: 10px;
    width: 25%;
    height: 100px;
    text-align: center;
    border-radius: 10px;
    background-color: #F2F2F2;
    display: flex;
  }
  .carton{
    animation:myfirst 5s;
    width: 400px;
    right: 0;
    top: 100px;
    /*min-width: 360px;*/

    /*display: flex;*/
    flex-wrap: wrap;
    position: absolute;
    border: 1px solid #ccc;
    text-align: center;
    color: #4F4D4D;
    background-color: #FFF;
    border-collapse: collapse;
    font-size: 14px;
  }
  @keyframes myfirst{
    0%   {background:red; right:0px; top:100px;}
    25%  {background:yellow; right:200px; top:100px;}
    50%  {background:blue; right:200px; top:200px;}
    75%  {background:green; right:0px; top:200px;}
    100% {background:red; right:0px; top:100px;}
  }

  h4 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
  }

  .content-div {
    background-color: white;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-outside: 10px;
    height: 1000px;

  }

  .col-md-3 {
    width: 130px;
    height: 100px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .col-md-4 {
    margin-left: 10px;
    margin-top: 20px;
    width: 170px;
    height: 100px;
    text-align: center;
  }

  .balance {
    background-color: #54ADE9;
  }

  .dongjie {
    background-color: #2F3F56;
  }

  .success-money {
    background-color: #5FB878;
  }

  .success-pay {
    background-color: #009788;
  }

  .pending {
    background-color: #F8B823;
  }

  .failed {
    background-color: #FE5722;
  }

  .info-class {
    margin-top: 10px;
  }

  .gonggao-div {
    width: 35%;
    margin-left: 20%;
  }
  .el-input-group__prepend {
    background-color: #E8F9B4;
    color: #5D5E61;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
  .el-pagination.is-background .el-pager li.active {
    background-color: #7fbaf0;
    color: #fff;
  }
  #feilv{
    table {


      div {
        /*width: 50%;*/
        /*display: flex;*/
      }
      tr{
        width: 100%;
      }
      th {
        background-color: #edf4fe;
        height: 40px;

        /*width: 50%;*/

        line-height: 40px;
      }
      td {
        color: red;
        line-height: 40px;
        height: 40px;
        /*width: 50%;*/
      }
    }

  }
</style>
